<template>
  <div class="home">
    <h1>
      点击地图，设置手绘图覆盖区域
    </h1>
    <div v-if="selectedPosition.latLng">
      当前选中点位经度：{{ selectedPosition.latLng.lng }} 纬度：{{
        selectedPosition.latLng.lat
      }}

      <el-button type="primary" @click="handleSwClick"
        >设置底图西南坐标</el-button
      >
      <el-button type="primary" @click="handleNeClick"
        >设置底图东北坐标</el-button
      >
    </div>
    <el-button type="primary" @click="handleSubmit">提交修改</el-button>
    <Map
      :layer-list="layerList"
      :center="center"
      :pointList="pointList"
      show-selected-point
      @markerClick="handleMarkerClick"
      @mapClick="handleMapClick"
    >
    </Map>
  </div>
</template>
    
  <script setup>
import { onMounted, reactive, toRefs } from "vue";
import Icon from "@/components/Icon.vue";
import Map from "@/components/Map.vue";
import http from "@/utils/http";
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage } from "element-plus";

// 组件列表
const components = { Icon, Map };

const Data = reactive({
  pointList: [],
  layerId: 0,
  areaId: 1,
  center: { lat: 28.674993, lng: 121.4077192 },
  layerList: [],
  selectedPosition: {},
});
const { pointList, layerId, center, layerList, selectedPosition } =
  toRefs(Data);
onMounted(() => {
  Data.layerId = router.currentRoute.value.query.layerId;
  init();
});
const init = () => {
  http.get("/area/ua/getLayerById?id=" + Data.layerId).then((res) => {
    Data.layerList = [res.data];
    Data.areaId = res.data.areaId;
    http
      .get("/point/ua/listPointsByAreaId?areaId=" + Data.areaId)
      .then((res) => {
        Data.pointList = res.data;
      });
    http.get("/area/ua/getAreaById?id=" + Data.areaId).then((res) => {
      Data.center = { lat: res.data.latitude, lng: res.data.longitude };
    });
  });
};
const selectIcon = (item) => {
  console.log(item);
};
const handleMarkerClick = (item) => {
  console.log(item);
};
const handleMapClick = (item) => {
  console.log(item);
  Data.selectedPosition = item;
  console.log(Data.selectedPosition);
};
const handleDeleteClick = (item) => {};
const handleUpdateClick = (item) => {
  console.log(item);
  const queryData = {
    id: item.id,
    areaId: Data.areaId,
    latitude: item.position.lat,
    longitude: item.position.lng,
    content: item.properties.content,
    description: item.properties.description,
    iconPath: item.properties.iconPath,
    imagePath: item.properties.imagePath,
    width: item.properties.width,
    height: item.properties.height,
  };
  router.push({
    path: "/home/editPoint",
    query: { point: encodeURIComponent(JSON.stringify(queryData)) },
  });
};
const handleAddClick = () => {
  const queryData = {
    areaId: Data.areaId,
    latitude: Data.center.lat,
    longitude: Data.center.lng,
    width: 22,
    height: 31,
  };
  router.push({
    path: "/home/editPoint",
    query: { point: encodeURIComponent(JSON.stringify(queryData)) },
  });
};
const handleSwClick = () => {
  console.log(Data.selectedPosition);
  Data.layerList[0].swlatitude = Data.selectedPosition.latLng.lat;
  Data.layerList[0].swlongitude = Data.selectedPosition.latLng.lng;
};
const handleNeClick = () => {
  console.log(Data.selectedPosition);
  Data.layerList[0].nelatitude = Data.selectedPosition.latLng.lat;
  Data.layerList[0].nelongitude = Data.selectedPosition.latLng.lng;
};
const handleSubmit = () => {
  http.post("/area/updateLayer", Data.layerList[0]).then((res) => {
    if (res.code === "0000") {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }
  });
};
</script>
    